<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js省市二级联动</title>
		<script type="text/javascript">
			var provinces=["请选择省份","河南省","江苏省","浙江省",];
			var citys=[
				["请选择城市"],
				["郑州市","开封市","洛阳市"],
				["南京市","无锡市","徐州市",],
				["杭州市","宁波市","温州市",],
				
			];
			window.onload=function(){
				var province=document.getElementById("province");
				var city=document.getElementById("city");
				
				//创建好后加入到列表中
				for(var i in provinces)
				{
					var option = document.createElement("option");
					option.text=provinces[i];
					option.value=provinces[i];
					province.appendChild(option);
				}
				var option = document.createElement("option");
				option.text=citys[0];
				option.value=citys[0];
				city.appendChild(option);
				
				
				
			}
		
			function changeProvince(selectedIndex){
				
				city.options.length=0;
				for(var i in citys[selectedIndex])
				{
					var option = document.createElement("option");
					option.text=citys[selectedIndex][i];
					option.value=citys[selectedIndex][i];
					city.appendChild(option);
				}
				
			}
		</script>
	</head>
	<body>
		
			省份：<select id="province" onchange="changeProvince(this.selectedIndex)"></select>
			城市：<select id="city"></select>
		
	</body>
</html>

